<template>
  <div class="page p-2">
    <BFCurd
      ref="bfCurd"
      :form="{ template: formState.template! }"
      :table="{ 
        rowKey: 'id',
        columns: tableState.columns!,
        selectRowKeys: tableState.selectKeys!
      }"
      :r="r"
      :c="c"
      :u="u"
      :d="d"
      @page-btn-click="pageBtnClick"
    >
      <template #moduleLogo="{ rowData }">
        <n-image width="100" :src="rowData.moduleLogo" />
      </template>
    </BFCurd>
  </div>
</template>

<script setup lang="ts">
import {
  BFCurdExpose,
  BFCurdOperaBtn,
  PageBtnClickCallbackFn,
  PageBtnClickData
} from '@/components/bf-curd/src/bf-curd'
import { onMounted, ref } from 'vue'
import { Module } from './module.controller'
import { r, c, u, d, init, formState, tableState, ModuleService } from './module.service'
import { NImage } from 'naive-ui'
import { useRouter } from 'vue-router'

const router = useRouter()

init()
ModuleService.getApplicationList()

const bfCurd = ref<BFCurdExpose<Module>>()
let _currentOpera = ''

const pageBtnClick = async (
  btn: BFCurdOperaBtn,
  e: PageBtnClickData<Module>,
  callBack?: PageBtnClickCallbackFn
) => {
  console.log(btn, e)
  switch (btn.opera) {
    case 'add':
      _currentOpera = 'add'
      bfCurd.value?.setFormData({})
      bfCurd.value?.showModal()
      break
    case 'detail':
      router.push('/lowcode/module/moduleDetail?id=' + e.rowData?.id)
      break
    case 'edit': {
      _currentOpera = 'edit'
      bfCurd.value?.setFormData({ ...e.rowData })
      bfCurd.value?.showModal()
      break
    }
    case 'bulk-delete':
      callBack!('d', { prompt: '你确定要删除这些应用嘛?', data: e.selectKeys })
      break
    case 'delete':
      callBack!('d', { prompt: '你确定要删除此表吗?', data: [e.rowData?.id] })
      break
    case 'confirm': {
      let action = await callBack!(_currentOpera === 'add' ? 'c' : 'u', { ...e.formdata })
      if (action) {
        bfCurd.value?.hideModal()
      }
      break
    }
  }
}

onMounted(() => {
  bfCurd.value?.addPageBtn(
    'tableActionBtns',
    {
      text: '模块详情',
      opera: 'detail',
      show() {
        return true
      },
      btnProps: { size: 'small', type: 'warning' }
    },
    0
  )
})
</script>

<style scoped lang="scss"></style>
